<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>学生信息</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/qcbycoursehelper/resours/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
 <!-- 添加的from表单 -->
  <form class="layui-form" action="" id="addForm" style="display:none" lay-filter="add" enctype="multipart/form-data">
    <div class="layui-form-item">
      <label class="layui-form-label">班级名称</label>
      <div class="layui-input-block">
        <input type="text" name="class" lay-verify="class" autocomplete="off" placeholder="班级名称" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">创建日期</label>
      <div class="layui-input-block">
        <input type="text" name="date" lay-verify="date" autocomplete="off" placeholder="创建日期" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">班主任ID</label>
      <div class="layui-btn-container">
      <button class="layui-btn layui-btn-primary demo1">
      选择老师
      <i class="layui-icon layui-icon-down layui-font-12"></i>
      </button>
      </div>
      <!-- 
      <div class="layui-input-block">
        <input type="text" name="teacherID" lay-verify="teacherID" autocomplete="off" placeholder="班主任ID" class="layui-input">
      </div>
       -->
    </div>
	<div class="layui-form-item" id="sub">
    	<button style="" class="layui-btn" type="button" lay-submit lay-filter="demo2" id="addsub">提交</button>
  	</div>
</form>
 
 
<table class="layui-hide" id="test" lay-filter="test">

</table>
 
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
	 <button type="button" class="layui-btn layui-btn-sm" id="add" lay-event="add">添加班级</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>

              
          
<script src="/qcbycoursehelper/resours/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --> 
 
<script>
layui.use(['dropdown', 'util', 'layer', 'table'], function(){
  var table = layui.table;
  var dropdown = layui.dropdown
  ,util = layui.util
  ,layer = layui.layer
  var pageCount;
  var classID;
  var studentInfo;
  var teacherID;
  getPage();
  
  dropdown.render({
	    elem: '.demo1'
	    ,data: [{
	      title: '麦克'
	      ,id: 6
	    },{
	      title: '王浩'
	      ,id: 7
	    },{
	      title: '阿亮'
	      ,id: 8
	    }]
	    ,click: function(obj){
	      layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
	      teacherID =obj.id;
	    }
	  });
  
  function add(){
		 layer_index= layer.open({
			  type: 1,  //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
			  title: "添加", //数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
			  area: ['500px', '400px'], //所打开页面大小
			  content:$("#addForm"), //内容
			  //关闭操作
			  cancel: function(){
				layer.close(layer_index);
				$("#addForm")[0].reset();
				$('#demoe1').attr('src', "");	  
			  }
		 }); 
		//刷新页面
		table.reload('test', {
			url: 'http://localhost:8080/qcbycoursehelper/createClassInfo'
		});
	}
	
  function studentUpdate(userData){
	  var data ={
			"id":userData.id,
	  		"classID":classID
	  }
	  $.ajax({
			type:"get",
			url:"http://localhost:8080/qcbycoursehelper/createClassUpdate",
			data:data,
			dataType:'JSON',
			
			success:function(res){
				console.log(res);
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				alert(typeof(errorThrown));
			}
		});
  }
  
  function teacherUpdate(teacherID){
	  var data ={
			"teacherID":teacherID,
	  		"classID":classID
	  }
	  $.ajax({
			type:"get",
			url:"http://localhost:8080/qcbycoursehelper/createClassUpdateT",
			data:data,
			dataType:'JSON',
			
			success:function(res){
				console.log(res);
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				alert(typeof(errorThrown));
			}
		});
  }
  
function searchClassID(data){
	  
	  $.ajax({
			type:"get",
			url:"http://localhost:8080/qcbycoursehelper/createClassSearch",
			data:data,
			dataType:'JSON',
			
			success:function(res){
				console.log(res);
				classID=res[3].rows.item[0].id;
				console.log(classID);
				var len = studentInfo.length;
		        for(var i=0;i<len;i++){
		        	console.log(studentInfo[i]);
		        	studentUpdate(studentInfo[i]);
		        }
		        teacherUpdate(teacherID);
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				alert(typeof(errorThrown));
			}
		});
  }

  
  function getPage(){
	  $.ajax({
			type:"get",
			url:"http://localhost:8080/qcbycoursehelper/createClassGetCount",
			data:{},
			dataType:'JSON',
			
			success:function(data){
				console.log(data);
				pageCount = data.count;
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				alert(typeof(errorThrown));
			}
		});
  }
  
  
  table.render({
    elem: '#test'
    ,url:'http://localhost:8080/qcbycoursehelper/createClassInfo'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,title: '用户数据表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
      ,{field:'name', title:'姓名', width:120, edit: 'text'}
      ,{field:'sex', title:'性别', width:200, edit: 'text'}
      ,{field:'school', title:'学校', width:200, edit: 'text'}
      ,{field:'class', title:'班级号', width:200, edit: 'text'}
      ,{field:'grade', title:'年级', width:200, edit: 'text', sort: true}
    ]]
    ,page: true
    ,limit:10
    ,response:{
		statusName: 'status' //规定数据状态的字段名称，默认：code
		,dataName: 'rows' //规定数据列表的字段名称，默认：data
	} 
		,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
			return {
		        "status": res[0].status,   //解析接口状态
		        "message":res[1].message,  //解析提示文本
		        "count": pageCount,       //解析数据长度
		        "rows": res[3].rows.item  //解析数据列表
		    };
  	}
  });
  
//引入from表单
  layui.use(['form', 'laydate'], function(){
		form = layui.form;
		form.render();
		
		//表单取值
		 form.on('submit(demo2)', function(data){
			    console.log(JSON.stringify(data.field));
			    $.ajax({   
		           url:'http://localhost:8080/qcbycoursehelper/classInfInsert',       
		           method:'post',
		          
		           data:data.field, 
		           dataType:'JSON',  
		           success:function(res){       
		                if(res.status='0'){
		                	//teacherID=data.field.teacherID;
		                	searchClassID(data.field);
		     				console.log(res);
		               	 	layer.msg("添加成功");
		               		$("#addForm")[0].reset();
		                 	form.render();
		             		
		                 	//page();
		                }else{
		                	layer.msg("添加失败");  
			                $("#addForm")[0].reset();
			                form.render();
		                }            
		           },
	               error:function (data) {
		               	layer.msg("网络错误");
		                $("#addForm")[0].reset();
		                form.render(); 
		           } 
		          }) ;
			      layer.close(layer_index);
			  });

	});
  
  table.on('toolbar(test)', function(obj){
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	    
	      case 'add':
	    	studentInfo = checkStatus.data;
	        add();
	      break;
	      case 'getCheckData':
	        var data = checkStatus.data;
	        layer.alert(JSON.stringify(data));
	      break;
	      case 'getCheckLength':
	        var data = checkStatus.data;
	        layer.msg('选中了：'+ data.length + ' 个');
	      break;
	      case 'isAll':
	        layer.msg(checkStatus.isAll ? '全选': '未全选');
	      break;
	      
	      //自定义头工具栏右侧图标 - 提示
	      case 'LAYTABLE_TIPS':
	        layer.alert('这是工具栏右侧自定义的一个图标按钮');
	      break;
	    };
	  });
 
  }); 
  
  
</script>

</body>
</html>